<template>
	<view class="medical-consultation">
		<view v-if="userType === 1" class="publish-btn" @click="goPublish">
			<text class="iconfont">+</text> <!-- 发布图标 -->
		</view>
		<!-- 最新医疗新闻 -->
		<view class="section">
			<view class="section-title">最新医疗新闻</view>
			<view class="common-list">
				<view class="common-item" v-for="(news, index) in medicalNews" :key="index"
					@click="goToDetail(news.messageId, 'news',news.coverImage)">
					<image :src="news.coverImage" mode="aspectFill"></image>
					<view class="item-content">
						<view class="item-title">{{ news.title }}</view>
						<view class="item-date">{{ news.date }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 健康知识文章 -->
		<view class="section">
			<view class="section-title">健康知识文章</view>
			<view class="common-list">
				<view class="common-item" v-for="(article, index) in healthArticles" :key="index"
					@click="goToDetail(article.messageId, 'article',article.coverImage)">
					<image :src="article.coverImage" mode="aspectFill"></image>
					<view class="item-content">
						<view class="item-title">{{ article.title }}</view>
						<view class="item-date">{{ article.date }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 疾病专题 -->
		<view class="section">
			<view class="section-title">疾病专题</view>
			<view class="common-list">
				<view class="common-item" v-for="(topic, index) in diseaseTopics" :key="index"
					@click="goToDetail(topic.messageId, 'topic', topic.coverImage)">
					<image :src="topic.coverImage" mode="aspectFill"></image>
					<view class="item-content">
						<view class="item-title">{{ topic.title }}</view>
						<view class="item-date">{{ topic.date }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 常见医疗工具使用教学 -->
		<view class="section">
			<view class="section-title">常见医疗工具使用教学</view>
			<view class="common-list">
				<view class="common-item" v-for="(tutorial, index) in toolTutorials" :key="index"
					@click="goToDetail(tutorial.messageId, 'tutorial', tutorial.coverImage)">
					<image :src="tutorial.coverImage" mode="aspectFill"></image>
					<view class="item-content">
						<view class="item-title">{{ tutorial.title }}</view>
						<view class="item-date">{{ tutorial.date }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userType: 0,
				medicalNews: [{
						id: '1',
						messageId: 1,
						title: '新型疫苗研发取得重大突破',
						coverImage: '/static/message/1.png',
						date: '2024-10-01'
					},
					{
						id: '2',
						messageId: 2,
						title: '医学研究发现新的治疗方法',
						coverImage: '/static/message/2.png',
						date: '2024-09-15'
					},
					{
						id: '3',
						messageId: 3,
						title: '人工智能辅助诊断技术应用于临床',
						coverImage: '/static/message/3.png',
						date: '2024-10-15'
					},
					{
						id: '4',
						messageId: 4,
						title: '最新医学期刊报道：慢性病管理新方案',
						coverImage: '/static/message/4.png',
						date: '2024-10-08'
					},
					{
						id: '5',
						messageId: 5,
						title: '国际医疗合作项目启动：共享医疗资源',
						coverImage: '/static/message/5.png',
						date: '2024-09-28'
					}
				],
				healthArticles: [{
						id: '1',
						messageId: 6,
						title: '秋季养生的关键要点',
						coverImage: '/static/message/6.png',
						date: '2024-10-10'
					},
					{
						id: '2',
						messageId: 7,
						title: '合理饮食预防疾病',
						coverImage: '/static/message/7.png',
						date: '2024-09-20'
					},
					{
						id: '3',
						messageId: 8,
						title: '运动与健康：每日30分钟改变生活',
						coverImage: '/static/message/8.png',
						date: '2024-10-12'
					},
					{
						id: '4',
						messageId: 9,
						title: '睡眠质量对免疫系统的影响',
						coverImage: '/static/message/9.png',
						date: '2024-10-05'
					}
				],
				diseaseTopics: [{
						id: '1',
						messageId: 10,
						title: '糖尿病专题研究',
						coverImage: '/static/message/10.png',
						date: '2024-10-05'
					},
					{
						id: '2',
						messageId: 11,
						title: '心血管疾病防治',
						coverImage: '/static/message/11.png',
						date: '2024-09-25'
					},
					{
						id: '3',
						messageId: 12,
						title: '呼吸系统疾病的早期症状',
						coverImage: '/static/message/12.png',
						date: '2024-10-15'
					}
				],
				toolTutorials: [{
						id: '1',
						messageId: 13,
						title: '体温计的正确使用方法',
						coverImage: '/static/message/13.png',
						date: '2024-10-12'
					},
					{
						id: '2',
						messageId: 14,
						title: '血压计的操作指南',
						coverImage: '/static/message/14.png',
						date: '2024-09-30'
					}
				]
			};
		},
		onLoad() {
			this.userType = uni.getStorageSync('userType')
		},
		methods: {
			// 跳转到详情页
			goToDetail(id, type, coverImage) {
				uni.navigateTo({
					url: `/pages/message/detail?id=${id}&type=${type}&coverImage=${coverImage}`
				});
			},
			goPublish() {
				uni.navigateTo({
					url: '/pages/message/publish'
				});
			}
		}
	};
</script>
<style scoped>
	.publish-btn {
		position: fixed;
		bottom: 110rpx;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #007AFF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.publish-btn .iconfont {
		color: white;
		font-size: 50rpx;
	}

	.medical-consultation {
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.common-list {
		display: flex;
		flex-direction: column;
	}

	.common-item {
		display: flex;
		align-items: left;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.common-item:last-child {
		border-bottom: none;
	}

	.common-item image {
		width: 180rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.item-content {
		flex: 1;
	}

	.item-title {
		font-size: 25rpx;
		margin-bottom: 5rpx;
	}

	.item-date {
		font-size: 24rpx;
		color: #989898;
	}
</style>